<template>

	<view class="shopping">
		<template v-if='list.length>0'>
		<!-- 自定义导航 -->
		<uniNavBar title='购物车' :rightText='isNavBar?"完成":"编辑"' fixed='true' statusBar='true'
			@clickRight='isNavBar =! isNavBar'></uniNavBar>

		<!-- 商品内容 -->
		<view class="shop-list">

			<view class="shop-item" v-for="(item,index) in list" :key="index">
				<label class="radio">
					<radio value="" color="#FF3333" :checked="item.checked" @tap='selectedItem(index)'></radio>
				</label>
				<image :src="item.imgUrl" class="shop-img"></image>
				<view class="shop-referral">
					<view class="shop-text">{{item.name}}</view>
					<view class="shop-color f-color">{{item.color}}</view>
					<view class="shop-price">
						<view>${{item.pprice}}</view>
						
						
						<template v-if="!isNavBar">
							<view>*{{item.num}}</view>
						</template>
						
						<template v-else>
							<uniNumBox :value="item.num" :min="min" :max="max" @change="changeNum($event,index)"></uniNumBox>
						</template>
						
					</view>
				</view>
			</view>

		</view>
		
		<!-- 商品底部-->
		<view class="shop-foot">
			<label class="radio foot-radio"  @tap="checkenAllList">
				<radio value="" color="red" :checked="checkenAllFn"/><text>全选</text>
			</label>
			<view class="foot-total">
				
				<template v-if="!isNavBar">
					<view class="foot-price">合计:<text class="f-active-color">${{totalCount.pprice}}</text></view>
					<view class="foot-num" @tap='goToOrderYes'>结算({{totalCount.num}})</view>
				</template>
				
				<template v-else>
					<view class="foot-num" style="background-color: black;">移入收藏夹</view>
					<view class="foot-num" @tap="delList()">删除</view>
				</template>
				

			</view>
		</view>
		
		</template>
		
		<template v-else>
			<uniNavBar title='购物车'  fixed='true' statusBar='true'></uniNavBar>
			<view class="shop-else-list">
				<text>囧~购物车空空如也~~</text>
			</view>
		</template>
		<tabbar cureentPage='shop'></tabbar>
	</view>
</template>

<script>
	import Tabbar from "@/component/common/tabbar.vue"
	import uniNumBox from '@/component/uni/uni-number-box/uni-number-box.vue'
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	import uniNavBar from "@/component/uni/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				isNavBar: false,
				min:1,
				max:1000000
			}
		},
		computed:{
			...mapState({
				list:state=>state.cart.list
			}),
			...mapGetters(['checkenAllFn','totalCount'])
		},
		components: {
			uniNavBar,
			uniNumBox,
			Tabbar
		
		},
		methods: {
			tapRight() {
				console.log("aaaa")
			},
			...mapActions(['checkenAllList','delList']),
			...mapMutations(['selectedItem']),
			changeNum(value,index){
				this.list[index].num=value;
			},
			goToOrderYes(){
				uni.navigateTo({
					url:"/pages/yes-order/yes-order"
				})
			}
		}
	}
</script>

<style scoped>
	.shop-list{
		padding-bottom: 100rpx;
	}
	.shop-else-list{
		background-color: #f7f7f7;
		position: absolute;
		left: 0;
		right: 0;
		top:0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.shop-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #f7f7f7;
		margin-bottom: 10rpx;
	}

	.shop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-color {
		font-size: 24rpx;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.shop-referral {
		flex: 1;
		padding-left: 20rpx;
	}
	.shop-foot{
		border-top: 2rpx solid #f7f7f7;
		background-color: #f7f7f7;
		position: fixed;
	    bottom: 120rpx;
		left:0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.foot-radio{
		padding-left: 20rpx;
	}
    .foot-total{
		display: flex;
	}
	.foot-price{
		line-height: 100rpx;
		padding: 0 20rpx;
	}
	.foot-num{
		background-color:#49BDFB ;
		color: #f7f7f7;
		padding: 0 60rpx;
		line-height: 100rpx;
	}
	
	
</style>
